<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Cascading and Inheritance Level 3</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="testing" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-cascade-3/" rel="canonical">
<script defer src="https://test.csswg.org/harness/annotate.js#!css-cascade-3_dev/css-cascade-3" type="text/javascript"></script>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Cascading and Inheritance Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-cascade-3/">https://drafts.csswg.org/css-cascade-3/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-cascade-3/">https://www.w3.org/TR/css-cascade-3/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2016/CR-css-cascade-3-20160519/" rel="prev">https://www.w3.org/TR/2016/CR-css-cascade-3-20160519/</a>
      <dd><a href="https://www.w3.org/TR/2015/CR-css-cascade-3-20150416/" rel="prev">https://www.w3.org/TR/2015/CR-css-cascade-3-20150416/</a>
      <dd><a href="https://www.w3.org/TR/2013/WD-css-cascade-3-20130730/" rel="prev">https://www.w3.org/TR/2013/WD-css-cascade-3-20130730/</a>
      <dd><a href="https://www.w3.org/TR/2013/WD-css3-cascade-20130103/" rel="prev">https://www.w3.org/TR/2013/WD-css3-cascade-20130103/</a>
      <dd><a href="https://www.w3.org/TR/2005/WD-css3-cascade-20051215/" rel="prev">https://www.w3.org/TR/2005/WD-css3-cascade-20051215/</a>
      <dt>Test Suite:
      <dd><a href="http://test.csswg.org/suites/css-cascade-3_dev/nightly-unstable/">http://test.csswg.org/suites/css-cascade-3_dev/nightly-unstable/</a>
      <dt>Issue Tracking:
      <dd><a href="https://drafts.csswg.org/css-cascade/issues">Disposition of Comments</a>
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-cascade-3">GitHub Issues</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="35400"><a class="p-name fn u-url url" href="http://fantasai.inkedblade.net/contact">Elika J. Etemad / fantasai</a> (<span class="p-org org">Invited Expert</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="42199"><a class="p-name fn u-url url" href="http://xanthir.com/contact/">Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-cascade-3/Overview.bs">GitHub Editor</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This CSS module describes how to collate style rules and assign values to all properties on all elements. By way of cascading and inheritance, values are propagated for all properties on all elements.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-cascade” in the title,
	preferably like this:
	“[css-cascade] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
     <ol class="toc">
      <li><a href="#placement"><span class="secno">1.1</span> <span class="content"> Module Interactions</span></a>
     </ol>
    <li>
     <a href="#at-import"><span class="secno">2</span> <span class="content"> Importing Style Sheets: the <span class="css">@import</span> rule</span></a>
     <ol class="toc">
      <li><a href="#content-type"><span class="secno">2.1</span> <span class="content"> Content-Type of CSS Style Sheets</span></a>
     </ol>
    <li>
     <a href="#shorthand"><span class="secno">3</span> <span class="content"> Shorthand Properties</span></a>
     <ol class="toc">
      <li><a href="#all-shorthand"><span class="secno">3.1</span> <span class="content"> Resetting All Properties: the <span class="property">all</span> property</span></a>
     </ol>
    <li>
     <a href="#value-stages"><span class="secno">4</span> <span class="content"> Value Processing</span></a>
     <ol class="toc">
      <li><a href="#declared"><span class="secno">4.1</span> <span class="content"> Declared Values</span></a>
      <li><a href="#cascaded"><span class="secno">4.2</span> <span class="content"> Cascaded Values</span></a>
      <li><a href="#specified"><span class="secno">4.3</span> <span class="content"> Specified Values</span></a>
      <li><a href="#computed"><span class="secno">4.4</span> <span class="content"> Computed Values</span></a>
      <li><a href="#used"><span class="secno">4.5</span> <span class="content"> Used Values</span></a>
      <li><a href="#actual"><span class="secno">4.6</span> <span class="content"> Actual Values</span></a>
      <li><a href="#stages-examples"><span class="secno">4.7</span> <span class="content"> Examples</span></a>
     </ol>
    <li><a href="#filtering"><span class="secno">5</span> <span class="content"> Filtering</span></a>
    <li>
     <a href="#cascading"><span class="secno">6</span> <span class="content"> Cascading</span></a>
     <ol class="toc">
      <li><a href="#cascading-origins"><span class="secno">6.1</span> <span class="content"> Cascading Origins</span></a>
      <li><a href="#importance"><span class="secno">6.2</span> <span class="content"> Important Declarations: the <span class="css">!important</span> annotation</span></a>
      <li><a href="#preshint"><span class="secno">6.3</span> <span class="content"> Precedence of Non-CSS Presentational Hints</span></a>
     </ol>
    <li>
     <a href="#defaulting"><span class="secno">7</span> <span class="content"> Defaulting</span></a>
     <ol class="toc">
      <li><a href="#initial-values"><span class="secno">7.1</span> <span class="content"> Initial Values</span></a>
      <li><a href="#inheriting"><span class="secno">7.2</span> <span class="content"> Inheritance</span></a>
      <li>
       <a href="#defaulting-keywords"><span class="secno">7.3</span> <span class="content"> Explicit Defaulting</span></a>
       <ol class="toc">
        <li><a href="#initial"><span class="secno">7.3.1</span> <span class="content"> Resetting a Property: the <span class="css">initial</span> keyword</span></a>
        <li><a href="#inherit"><span class="secno">7.3.2</span> <span class="content"> Explicit Inheritance: the <span class="css">inherit</span> keyword</span></a>
        <li><a href="#inherit-initial"><span class="secno">7.3.3</span> <span class="content"> Erasing All Declarations: the <span class="css">unset</span> keyword</span></a>
       </ol>
     </ol>
    <li>
     <a href="#changes"><span class="secno">8</span> <span class="content"> Changes</span></a>
     <ol class="toc">
      <li><a href="#changes-2016"><span class="secno">8.1</span> <span class="content"> Changes Since the 19 May 2016 Candidate Recommendation</span></a>
      <li><a href="#changes-2013"><span class="secno">8.2</span> <span class="content"> Changes Since the 3 October 2013 Candidate Recommendation</span></a>
      <li><a href="#changes-2"><span class="secno">8.3</span> <span class="content"> Additions Since Level 2</span></a>
     </ol>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Acknowledgments</span></a>
    <li><a href="#priv-sec"><span class="secno"></span> <span class="content"> Privacy and Security Considerations</span></a>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
   <p>One of the fundamental design principles of CSS is <a data-link-type="dfn" href="#cascade" id="ref-for-cascade">cascading</a>,
	which allows several style sheets to influence the presentation of a document.
	When different declarations try to set a value for the same element/property combination,
	the conflicts must somehow be resolved.</p>
   <p>The opposite problem arises when no declarations try to set a the value for an element/property combination.
	In this case, a value is be found by way of <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance">inheritance</a> or by looking at the property’s <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value">initial value</a>.</p>
   <p>The <a href="#cascade" id="ref-for-cascade⑦">cascading</a> and <a href="#defaulting">defaulting</a> process takes a set of declarations as input,
	and outputs a <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value">specified value</a> for each property on each element.</p>
   <p>The rules for finding the specified value for all properties on all elements in the document are described in this specification.
	The rules for finding the specified values in the page context and its margin boxes are described in <a data-link-type="biblio" href="#biblio-css-page-3">[css-page-3]</a>.</p>
   <h3 class="heading settled" data-level="1.1" id="placement"><span class="secno">1.1. </span><span class="content"> Module Interactions</span><a class="self-link" href="#placement"></a></h3>
   <p><em>This section is normative.</em></p>
   <p>This module replaces and extends
	the rules for assigning property values, cascading, and inheritance defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> chapter 6.</p>
   <p>Other CSS modules may expand the definitions of some of the syntax and features defined here.
	For example, the Media Queries Level 4 specification,
	when combined with this module, expands the definition of
	the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query" id="ref-for-typedef-media-query">&lt;media-query></a> value type as used in this specification.</p>
   <h2 class="heading settled" data-level="2" id="at-import"><span class="secno">2. </span><span class="content"> Importing Style Sheets: the <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import">@import</a> rule</span><a class="self-link" href="#at-import"></a></h2>
   <p>The <dfn class="dfn-paneled css" data-dfn-type="at-rule" data-export id="at-ruledef-import">@import</dfn> rule allows users to import style rules from other style sheets.
	If an <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①">@import</a> rule refers to a valid stylesheet,
	user agents must treat the contents of the stylesheet as if they were written in place of the <span class="css" id="ref-for-at-ruledef-import②">@import</span> rule,
	with two exceptions:</p>
   <ul>
    <li data-md>
     <p>If a feature
(such as the <span class="css">@namespace</span> rule) <em>explicitly</em> defines that it only applies to a particular stylesheet,
and not any imported ones,
then it doesn’t apply to the imported stylesheet.</p>
    <li data-md>
     <p>If a feature relies on the relative ordering of two or more constructs in a stylesheet
(such as the requirement that <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-syntax-3/#at-ruledef-charset" id="ref-for-at-ruledef-charset">@charset</a> must not have any other content preceding it),
it only applies between constructs in the same stylesheet.</p>
   </ul>
   <p class="example" id="example-d425da12"><a class="self-link" href="#example-d425da12"></a> For example, declarations in style rules from imported stylesheets interact with the cascade
		as if they were written literally into the stylesheet at the point of the <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import③">@import</a>. </p>
   <p>Any <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import④">@import</a> rules must precede all other at-rules and style rules in a style sheet
	(besides <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-syntax-3/#at-ruledef-charset" id="ref-for-at-ruledef-charset①">@charset</a>, which must be the first thing in the style sheet if it exists),
	or else the <span class="css" id="ref-for-at-ruledef-import⑤">@import</span> rule is invalid.
	The syntax of <span class="css" id="ref-for-at-ruledef-import⑥">@import</span> is:</p>
<pre class="prod">@import [ <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value">&lt;url></a> <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> <a class="production" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value">&lt;string></a> ] <a class="production" data-link-type="type" href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list">&lt;media-query-list></a><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#mult-opt" id="ref-for-mult-opt">?</a> ;</pre>
   <p>Where the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value①">&lt;url></a> or <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value①">&lt;string></a> gives the URL of the style sheet to be imported,
	and the optional <a class="production css" data-link-type="type" href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list①">&lt;media-query-list></a> (the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="import-conditions">import conditions</dfn>)
	states the conditions under which it applies.</p>
   <p>If a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#string-value" id="ref-for-string-value②">&lt;string></a> is provided,
	it must be interpreted as a <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-3/#url-value" id="ref-for-url-value②">&lt;url></a> with the same value.</p>
   <div class="example" id="example-da2e49cb">
    <a class="self-link" href="#example-da2e49cb"></a> The following lines are equivalent in meaning
		and illustrate both <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import⑦">@import</a> syntaxes
		(one with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#funcdef-url" id="ref-for-funcdef-url">url()</a> and one with a bare string): 
<pre class="lang-css highlight"><c- n>@import</c-> <c- s>"mystyle.css"</c-><c- p>;</c->
<c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"mystyle.css"</c-><c- p>);</c->
</pre>
   </div>
   <p>The <a data-link-type="dfn" href="#import-conditions" id="ref-for-import-conditions">import conditions</a> allow the import to be media-dependent.
	In the absence of any <span id="ref-for-import-conditions①">import conditions</span>, the import is unconditional.
	(Specifying <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/mediaqueries-4/#valdef-media-all" id="ref-for-valdef-media-all">all</a> for the <a class="production css" data-link-type="type" href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list" id="ref-for-typedef-media-query-list②">&lt;media-query-list></a> has the same effect.)</p>
   <p>The evaluation and full syntax of the expressions after the URL
	is defined by the <a href="https://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> specification <a data-link-type="biblio" href="#biblio-mediaq">[MEDIAQ]</a>.
	If the media query does not match,
	the rules in the imported stylesheet do not apply,
	exactly as if the imported stylesheet were wrapped in an <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media" id="ref-for-at-ruledef-media">@media</a> block with the given media query.
	User agents may therefore avoid fetching a media-dependent import
	as long as the media query does not match.</p>
   <div class="example" id="example-5fa651f3">
    <a class="self-link" href="#example-5fa651f3"></a> The following rules illustrate how <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import⑧">@import</a> rules can be made media-dependent: 
<pre class="lang-css highlight"><c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"fineprint.css"</c-><c- p>)</c-> print<c- p>;</c->
<c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"bluish.css"</c-><c- p>)</c-> projection<c- p>,</c-> tv<c- p>;</c->
<c- n>@import</c-> <c- nf>url</c-><c- p>(</c-><c- s>"narrow.css"</c-><c- p>)</c-> handheld and <c- p>(</c->max-width: 400px);
</pre>
   </div>
   <p>When the same style sheet is imported or linked to a document in multiple places,
	user agents must process (or act as though they do) each link
	as though the link were to an independent style sheet.</p>
   <p class="note" role="note"><span>Note:</span> This does not place any requirements on resource fetching,
	only how the style sheet is reflected in the CSSOM and used in specs such as this one.
	Assuming appropriate caching,
	it is perfectly appropriate for a UA to fetch a style sheet only once,
	even though it’s linked or imported multiple times.</p>
   <p>The <a data-link-type="dfn" href="#origin" id="ref-for-origin">origin</a> of an imported style sheet is the <span id="ref-for-origin①">origin</span> of the style sheet that imported it.</p>
   <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#environment-encoding" id="ref-for-environment-encoding">environment encoding</a> of an imported style sheet is the encoding of the style sheet that imported it. <a data-link-type="biblio" href="#biblio-css-syntax-3">[css-syntax-3]</a></p>
   <h3 class="heading settled" data-level="2.1" id="content-type"><span class="secno">2.1. </span><span class="content"> Content-Type of CSS Style Sheets</span><a class="self-link" href="#content-type"></a></h3>
   <p>The processing of imported style sheets depends on the actual type of the linked resource.
	If the resource does not have <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type">Content-Type metadata</a>,
	or the host document is in <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#quirks-mode">quirks mode</a> and has the <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin">same origin</a> as the imported style sheet,
	the type of the linked resource is <code>text/css</code>.
	Otherwise, the type is determined from its <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type">Content-Type metadata</a>.</p>
   <p>If the linked resource’s type is <code>text/css</code>,
	it must be interpreted as a CSS style sheet.
	Otherwise, it must be interpreted as a network error.</p>
   <h2 class="heading settled" data-level="3" id="shorthand"><span class="secno">3. </span><span class="content"> Shorthand Properties</span><a class="self-link" href="#shorthand"></a></h2>
   <p>Some properties are <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="shorthand property | shorthand" id="shorthand-property">shorthand properties</dfn>,
	meaning that they allow authors to specify the values of several properties with a single property.
	A <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property">shorthand property</a> sets all of its <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="longhand | longhand property | sub-property" id="longhand">longhand sub-properties</dfn>,
	exactly as if expanded in place.</p>
   <p>When values are omitted from a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①">shorthand</a> form,
	unless otherwise defined,
	each “missing” <a data-link-type="dfn" href="#longhand" id="ref-for-longhand">sub-property</a> is assigned its <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value①">initial value</a>.</p>
   <div class="note" role="note">
     This means that a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property②">shorthand</a> property declaration always sets <em>all</em> of its <a data-link-type="dfn" href="#longhand" id="ref-for-longhand①">sub-properties</a>,
		even those that are not explicitly set.
		Carelessly used, this might result in inadvertently resetting some <span id="ref-for-longhand②">sub-properties</span>.
		Carefully used, a <span id="ref-for-shorthand-property③">shorthand</span> can guarantee a “blank slate”
		by resetting <span id="ref-for-longhand③">sub-properties</span> inadvertently cascaded from other sources. 
    <p>For example, writing <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background" id="ref-for-propdef-background">background: green</a> rather than <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color" id="ref-for-propdef-background-color">background-color: green</a> ensures that the background color overrides any earlier declarations
		that might have set the background to an image with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image" id="ref-for-propdef-background-image">background-image</a>.</p>
   </div>
   <div class="example" id="example-8762997a">
    <a class="self-link" href="#example-8762997a"></a> For example, the CSS Level 1 <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font" id="ref-for-propdef-font">font</a> property
		is a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property④">shorthand</a> property for setting <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-style" id="ref-for-propdef-font-style">font-style</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant" id="ref-for-propdef-font-variant">font-variant</a>, <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight" id="ref-for-propdef-font-weight">font-weight</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size">font-size</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height" id="ref-for-propdef-line-height">line-height</a>, and <a class="css" data-link-type="property" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-family" id="ref-for-propdef-font-family">font-family</a> all at once.
		The multiple declarations of this example: 
<pre class="lang-css highlight"><c- f>h1 </c-><c- p>{</c->
  <c- k>font-weight</c-><c- p>:</c-> bold<c- p>;</c->
  <c- k>font-size</c-><c- p>:</c-> <c- m>12</c-><c- l>pt</c-><c- p>;</c->
  <c- k>line-height</c-><c- p>:</c-> <c- m>14</c-><c- l>pt</c-><c- p>;</c->
  <c- k>font-family</c-><c- p>:</c-> Helvetica<c- p>;</c->
  <c- k>font-variant</c-><c- p>:</c-> normal<c- p>;</c->
  <c- k>font-style</c-><c- p>:</c-> normal<c- p>;</c->
<c- p>}</c->
</pre>
    <p>can therefore be rewritten as</p>
<pre class="lang-css highlight"><c- f>h1 </c-><c- p>{</c-> <c- k>font</c-><c- p>:</c-> bold <c- m>12</c-><c- l>pt</c-><c- p>/</c-><c- m>14</c-><c- l>pt</c-> Helvetica <c- p>}</c-></pre>
    <p>As more <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font" id="ref-for-propdef-font①">font</a> <a data-link-type="dfn" href="#longhand" id="ref-for-longhand④">sub-properties</a> are introduced into CSS,
		the shorthand declaration resets those to their initial values as well.</p>
   </div>
   <p>In some cases, a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property⑤">shorthand</a> might have different syntax
	or special keywords
	that don’t directly correspond to values of its <a data-link-type="dfn" href="#longhand" id="ref-for-longhand⑤">sub-properties</a>.
	(In such cases, the <span id="ref-for-shorthand-property⑥">shorthand</span> will explicitly define the expansion of its values.)</p>
   <p>In other cases, a property might be a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="reset-only-sub-property">reset-only sub-property</dfn> of the shorthand:
	Like other <a data-link-type="dfn" href="#longhand" id="ref-for-longhand⑥">sub-properties</a>, it is reset to its initial value by the shorthand when unspecified,
	but the shorthand might not include syntax to set the <span id="ref-for-longhand⑦">sub-property</span> to any of its other values.
	For example, the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border">border</a> shorthand resets <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image" id="ref-for-propdef-border-image">border-image</a> to its initial value of <span class="css">none</span>,
	but has no syntax to set it to anything else. <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a></p>
   <p>If a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property⑦">shorthand</a> is specified as one of the <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a> <a data-link-type="biblio" href="#biblio-css-values-3">[css-values-3]</a>,
	it sets all of its <a data-link-type="dfn" href="#longhand" id="ref-for-longhand⑧">sub-properties</a> to that keyword,
	including any that are <a data-link-type="dfn" href="#reset-only-sub-property" id="ref-for-reset-only-sub-property">reset-only sub-properties</a>.
	(Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)</p>
   <p>Declaring a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property⑧">shorthand</a> property to be <span class="css">!important</span> is equivalent to declaring all of its <a data-link-type="dfn" href="#longhand" id="ref-for-longhand⑨">sub-properties</a> to be <span class="css">!important</span>.</p>
   <h3 class="heading settled" data-level="3.1" id="all-shorthand"><span class="secno">3.1. </span><span class="content"> Resetting All Properties: the <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all">all</a> property</span><a class="self-link" href="#all-shorthand"></a></h3>
   <table class="def propdef" data-link-for-hint="all">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-all">all</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">initial <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one①">|</a> inherit <span id="ref-for-comb-one②">|</span> unset 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>see individual properties 
     <tr>
      <th>Applies to:
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>see individual properties 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>see individual properties 
     <tr>
      <th>Canonical order:
      <td>per grammar 
   </table>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all①">all</a> property is a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property⑨">shorthand</a> that resets <em>all</em> CSS properties
	except <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi">unicode-bidi</a>.
	It only accepts the <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a>.
	It does not reset <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property">custom properties</a> <a data-link-type="biblio" href="#biblio-css-variables-1">[css-variables-1]</a>.</p>
   <p class="note" role="note"><span>Note:</span> The excepted CSS properties <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi①">unicode-bidi</a> are actually markup-level features,
	and <a href="https://www.w3.org/TR/css3-writing-modes/#text-direction">should not be set in the author’s style sheet</a>.
	(They exist as CSS properties only to style document languages not supported by the UA.)
	Authors should use the appropriate markup, such as HTML’s <code>dir</code> attribute, instead. <a data-link-type="biblio" href="#biblio-css-writing-modes-3">[css-writing-modes-3]</a></p>
   <div class="example" id="example-09a6efc7">
    <a class="self-link" href="#example-09a6efc7"></a> For example, if an author specifies <a class="css" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all②">all: initial</a> on an element
		it will block all inheritance and reset all properties,
		as if no rules appeared in the author, user, or user-agent levels of the cascade. 
    <p>This can be useful for the root element of a "widget" included in a page,
		which does not wish to inherit the styles of the outer page.
		Note, however, that any "default" style applied to that element
		(such as, e.g. <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-display" id="ref-for-propdef-display">display: block</a> from the UA style sheet on block elements such as <code>&lt;div></code>)
		will also be blown away.</p>
   </div>
   <h2 class="heading settled" data-level="4" id="value-stages"><span class="secno">4. </span><span class="content"> Value Processing</span><a class="self-link" href="#value-stages"></a></h2>
   <p>Once a user agent has parsed a document and constructed a document tree,
	it must assign,
	to every element in the tree,
	and correspondingly to every box in the formatting structure,
	a value to every property that applies to the target media type.</p>
   <p>The final value of a CSS property for a given element or box
	is the result of a multi-step calculation:</p>
   <ol>
    <li> First, all the <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value">declared values</a> applied to an element are collected,
			for each property on each element.
			There may be zero or many <span id="ref-for-declared-value①">declared values</span> applied to the element. 
    <li> Cascading yields the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value">cascaded value</a>.
			There is at most one <span id="ref-for-cascaded-value①">cascaded value</span> per property per element. 
    <li> Defaulting yields the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①">specified value</a>.
			Every element has exactly one <span id="ref-for-specified-value②">specified value</span> per property. 
    <li> Resolving value dependencies yields the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value">computed value</a>.
			Every element has exactly one <span id="ref-for-computed-value①">computed value</span> per property. 
    <li> Formatting the document yields the <a data-link-type="dfn" href="#used-value" id="ref-for-used-value">used value</a>.
			An element only has a <span id="ref-for-used-value①">used value</span> for a given property
			if that property applies to the element. 
    <li> Finally, the used value is transformed to the <a data-link-type="dfn" href="#actual-value" id="ref-for-actual-value">actual value</a> based on constraints of the display environment.
			As with the <a data-link-type="dfn" href="#used-value" id="ref-for-used-value②">used value</a>, there may or may not be an <span id="ref-for-actual-value①">actual value</span> for a given property on an element. 
   </ol>
   <h3 class="heading settled" data-level="4.1" id="declared"><span class="secno">4.1. </span><span class="content"> Declared Values</span><a class="self-link" href="#declared"></a></h3>
   <p>Each property declaration <a href="#filtering">applied to an element</a> contributes a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="declared-value">declared value</dfn> for that property
	associated with the element.
	See <a href="#filtering">Filtering Declarations</a> for details.</p>
   <p>These values are then processed by the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade①">cascade</a> to choose a single “winning value”.</p>
   <h3 class="heading settled" data-level="4.2" id="cascaded"><span class="secno">4.2. </span><span class="content"> Cascaded Values</span><a class="self-link" href="#cascaded"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cascaded-value">cascaded value</dfn> represents the result of <a href="#cascade" id="ref-for-cascade⑧">the cascade</a>:
	it is the <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value②">declared value</a> that wins the cascade
	(is sorted first in the <a data-link-type="dfn" href="#output-of-the-cascade" id="ref-for-output-of-the-cascade">output of the cascade</a>).
	If the <span id="ref-for-output-of-the-cascade①">output of the cascade</span> is an empty list,
	there is no <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value②">cascaded value</a>.</p>
   <h3 class="heading settled" data-level="4.3" id="specified"><span class="secno">4.3. </span><span class="content"> Specified Values</span><a class="self-link" href="#specified"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="specified-value">specified value</dfn> is the value of a given property that the style sheet authors intended for that element.
	It is the result of putting the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value③">cascaded value</a> through the <a href="#defaulting">defaulting</a> processes,
	guaranteeing that a <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value③">specified value</a> exists for every property on every element.</p>
   <p>In many cases, the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value④">specified value</a> is the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value④">cascaded value</a>.
	However, if there is no <span id="ref-for-cascaded-value⑤">cascaded value</span> at all,
	the <span id="ref-for-specified-value⑤">specified value</span> is <a href="#defaulting">defaulted</a>.
	The <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> are handled specially
	when they are the <span id="ref-for-cascaded-value⑥">cascaded value</span> of a property,
	setting the <span id="ref-for-specified-value⑥">specified value</span> as required by that keyword,
	see <a href="#defaulting-keywords">§ 7.3 Explicit Defaulting</a>.</p>
   <h3 class="heading settled" data-level="4.4" id="computed"><span class="secno">4.4. </span><span class="content"> Computed Values</span><a class="self-link" href="#computed"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="computed-value">computed value</dfn> is the result of resolving the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value⑦">specified value</a> as defined in the “Computed Value” line of the property definition table,
	generally absolutizing it in preparation for <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance①">inheritance</a>.</p>
   <p class="note" role="note"><span>Note:</span> The <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value②">computed value</a> is the value that is transferred from parent to child during <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance②">inheritance</a>.
	For historical reasons,
	it is not necessarily the value returned by the <code class="idl"><a data-link-type="idl" href="https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle" id="ref-for-dom-window-getcomputedstyle">getComputedStyle()</a></code> function,
	which sometimes returns <a data-link-type="dfn" href="#used-value" id="ref-for-used-value③">used values</a>. <a data-link-type="biblio" href="#biblio-cssom">[CSSOM]</a> Furthermore, the <span id="ref-for-computed-value③">computed value</span> is an abstract data representation:
	their definitions reflect that data representation,
	not how that data is serialized.
	For example, serialization rules often allow omitting certain values which are implied during parsing;
	but those values are nonetheless part of the <span id="ref-for-computed-value④">computed value</span>.</p>
   <div class="example" id="example-29410c97">
    <a class="self-link" href="#example-29410c97"></a> A <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value⑧">specified value</a> can be either absolute (i.e., not relative to another value, as in <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-color-4/#valdef-color-red" id="ref-for-valdef-color-red">red</a> or <span class="css">2mm</span>)
		or relative (i.e., relative to another value, as in <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-padding-auto" id="ref-for-valdef-scroll-padding-auto">auto</a>, <span class="css">2em</span>).
		Computing a relative value generally absolutizes it: 
    <ul>
     <li> values with relative units
				(<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#em" id="ref-for-em">em</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#ex" id="ref-for-ex">ex</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vh" id="ref-for-vh">vh</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-values-4/#vw" id="ref-for-vw">vw</a>)
				must be made absolute by multiplying with the appropriate reference size 
     <li> certain keywords
				(e.g., <span class="css">smaller</span>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#valdef-font-weight-bolder" id="ref-for-valdef-font-weight-bolder">bolder</a>)
				must be replaced according to their definitions 
     <li> percentages on some properties must be multiplied by a reference value
				(defined by the property) 
     <li> valid relative URLs must be resolved to become absolute. 
    </ul>
    <p>See examples (f), (g) and (h) in the <a href="#stages-examples">table below</a>.</p>
   </div>
   <p class="note" role="note"><span>Note:</span> In general, the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value⑤">computed value</a> resolves the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value⑨">specified value</a> as far as possible without laying out the document
	or performing other expensive or hard-to-parallelize operations,
	such as resolving network requests
	or retrieving values other than from the element and its parent.</p>
   <p>The <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value⑥">computed value</a> exists even when the property does not apply
	(as defined by the “Applies To” line).
	However, some properties may change how they determine the <span id="ref-for-computed-value⑦">computed value</span> based on whether the property applies to the element.</p>
   <h3 class="heading settled" data-level="4.5" id="used"><span class="secno">4.5. </span><span class="content"> Used Values</span><a class="self-link" href="#used"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="used-value">used value</dfn> is the result of taking the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value⑧">computed value</a> and completing any remaining calculations to make it the absolute theoretical value
	used in the layout of the document.
	If the property does not apply to this element,
	then the element has no <a data-link-type="dfn" href="#used-value" id="ref-for-used-value④">used value</a> for that property.</p>
   <p class="example" id="example-aaa6b50b"><a class="self-link" href="#example-aaa6b50b"></a> For example, a declaration of <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width">width: auto</a> can’t be resolved into a length without knowing the layout of the element’s ancestors,
		so the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value⑨">computed value</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-padding-auto" id="ref-for-valdef-scroll-padding-auto①">auto</a>,
		while the <a data-link-type="dfn" href="#used-value" id="ref-for-used-value⑤">used value</a> is an absolute length, such as <span class="css">100px</span>. <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> </p>
   <p class="example" id="example-aac2d669"><a class="self-link" href="#example-aac2d669"></a> As another example, a <code>&lt;div></code> might have a computed <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-3/#propdef-break-before" id="ref-for-propdef-break-before">break-before</a> value of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-padding-auto" id="ref-for-valdef-scroll-padding-auto②">auto</a>,
		but acquire a used <span class="property" id="ref-for-propdef-break-before①">break-before</span> value of <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-break-4/#valdef-break-before-page" id="ref-for-valdef-break-before-page">page</a> by propagation from its first child. <a data-link-type="biblio" href="#biblio-css-break-3">[css-break-3]</a> </p>
   <p class="example" id="example-b0b97a59"><a class="self-link" href="#example-b0b97a59"></a> Lastly, if a property does not apply to an element,
		it has no <a data-link-type="dfn" href="#used-value" id="ref-for-used-value⑥">used value</a>;
		so, for example, the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex" id="ref-for-propdef-flex">flex</a> property has no <span id="ref-for-used-value⑦">used value</span> on elements that aren’t <a data-link-type="dfn" href="https://drafts.csswg.org/css-flexbox-1/#flex-item" id="ref-for-flex-item">flex items</a>. </p>
   <h3 class="heading settled" data-level="4.6" id="actual"><span class="secno">4.6. </span><span class="content"> Actual Values</span><a class="self-link" href="#actual"></a></h3>
   <p>A <a data-link-type="dfn" href="#used-value" id="ref-for-used-value⑧">used value</a> is in principle ready to be used,
	but a user agent may not be able to make use of the value in a given environment.
	For example, a user agent may only be able to render borders with integer pixel widths
	and may therefore have to approximate the <span id="ref-for-used-value⑨">used</span> width.
	Also, the font size of an element may need adjustment based on the availability of fonts
	or the value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size-adjust" id="ref-for-propdef-font-size-adjust">font-size-adjust</a> property.
	The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="actual-value">actual value</dfn> is the used value after any such adjustments have been made.</p>
   <p class="note" role="note"><span>Note:</span> By probing the actual values of elements,
	much can be learned about how the document is laid out.
	However, not all information is recorded in the actual values.
	For example, the actual value of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/page.html#propdef-page-break-after" id="ref-for-propdef-page-break-after">page-break-after</a> property
	does not reflect whether there is a page break or not after the element.
	Similarly, the actual value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-3/#propdef-orphans" id="ref-for-propdef-orphans">orphans</a> does not reflect how many orphan lines there is in a certain element.
	See examples (j) and (k) in the <a href="#stages-examples">table below</a>.</p>
   <h3 class="heading settled" data-level="4.7" id="stages-examples"><span class="secno">4.7. </span><span class="content"> Examples</span><a class="self-link" href="#stages-examples"></a></h3>
   <table class="data">
    <thead>
     <tr>
      <th>
      <th>Property 
      <th>Winning declaration 
      <th>Cascaded value 
      <th>Specified value 
      <th>Computed value 
      <th>Used value 
      <th>Actual value 
    <tbody>
     <tr>
      <td>(a) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-align" id="ref-for-propdef-text-align">text-align</a> 
      <td><code class="declaration">text-align: left</code> 
      <td><span class="css">left</span> 
      <td><span class="css">left</span> 
      <td><span class="css">left</span> 
      <td><span class="css">left</span> 
      <td><span class="css">left</span> 
     <tr>
      <td>(b) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a> 
      <td><code class="declaration">border-width: inherit</code> 
      <td><span class="css">inherit</span> 
      <td class="say"><span class="css">4.2px</span> 
      <td><span class="css">4.2px</span> 
      <td><span class="css">4.2px</span> 
      <td><span class="css">4px</span> 
     <tr>
      <td>(c) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①">width</a> 
      <td><small>(none)</small> 
      <td><small>(none)</small> 
      <td><span class="css">auto</span> <small>(initial value)</small> 
      <td><span class="css">auto</span> 
      <td><span class="css">120px</span> 
      <td><span class="css">120px</span> 
     <tr>
      <td>(d) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position" id="ref-for-propdef-list-style-position">list-style-position</a> 
      <td><code class="declaration">list-style-position: inherit</code> 
      <td><span class="css">inherit</span> 
      <td class="say"><span class="css">inside</span> 
      <td><span class="css">inside</span> 
      <td><span class="css">inside</span> 
      <td><span class="css">inside</span> 
     <tr>
      <td>(e) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position" id="ref-for-propdef-list-style-position①">list-style-position</a> 
      <td><code class="declaration">list-style-position: initial</code> 
      <td><span class="css">initial</span> 
      <td><span class="css">outside</span> <small>(initial value)</small> 
      <td><span class="css">outside</span> 
      <td><span class="css">outside</span> 
      <td><span class="css">outside</span> 
     <tr>
      <td>(f) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size①">font-size</a> 
      <td><code class="declaration">font-size: 1.2em</code> 
      <td><span class="css">1.2em</span> 
      <td><span class="css">1.2em</span> 
      <td class="say"><span class="css">14.1px</span> 
      <td><span class="css">14.1px</span> 
      <td><span class="css">14px</span> 
     <tr>
      <td>(g) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width②">width</a> 
      <td><code class="declaration">width: 80%</code> 
      <td><span class="css">80%</span> 
      <td><span class="css">80%</span> 
      <td><span class="css">80%</span> 
      <td class="say"><span class="css">354.2px</span> 
      <td><span class="css">354px</span> 
     <tr>
      <td>(h) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width③">width</a> 
      <td><code class="declaration">width: auto</code> 
      <td><span class="css">auto</span> 
      <td><span class="css">auto</span> 
      <td><span class="css">auto</span> 
      <td class="say"><span class="css">134px</span> 
      <td><span class="css">134px</span> 
     <tr>
      <td>(i) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height">height</a> 
      <td><code class="declaration">height: auto</code> 
      <td><span class="css">auto</span> 
      <td><span class="css">auto</span> 
      <td><span class="css">auto</span> 
      <td class="say"><span class="css">176px</span> 
      <td><span class="css">176px</span> 
     <tr>
      <td>(j) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/page.html#propdef-page-break-after" id="ref-for-propdef-page-break-after①">page-break-after</a> 
      <td><small>(none)</small> 
      <td><small>(none)</small> 
      <td><span class="css">auto</span> <small>(initial value)</small> 
      <td><span class="css">auto</span> 
      <td><span class="css">auto</span> 
      <td><span class="css">auto</span> 
     <tr>
      <td>(k) 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-break-3/#propdef-orphans" id="ref-for-propdef-orphans①">orphans</a> 
      <td><code class="declaration">orphans: 3</code> 
      <td><span class="css">3</span> 
      <td><span class="css">3</span> 
      <td><span class="css">3</span> 
      <td><span class="css">3</span> 
      <td><span class="css">3</span> 
   </table>
   <h2 class="heading settled" data-level="5" id="filtering"><span class="secno">5. </span><span class="content"> Filtering</span><a class="self-link" href="#filtering"></a></h2>
   <p>In order to find the <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value③">declared values</a>,
	implementations must first identify all declarations that apply to each element.
	A declaration applies to an element if:</p>
   <ul>
    <li> It belongs to a style sheet that currently applies to this document. 
    <li> It is not qualified by a conditional rule <a data-link-type="biblio" href="#biblio-css3-conditional">[CSS3-CONDITIONAL]</a> with a false condition. 
    <li> It belongs to a style rule whose selector matches the element. <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> (Taking <a href="https://www.w3.org/TR/selectors4/#scoping">scoping</a> into account, if necessary.) 
    <li> It is syntactically valid:
			the declaration’s property is a known property name,
			and the declaration’s value matches the syntax for that property. 
   </ul>
   <p>The values of the declarations that apply form,
	for each property on each element,
	a list of <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value④">declared values</a>.
	The next section,
	the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade②">cascade</a>,
	prioritizes these lists.</p>
   <h2 class="heading settled" data-level="6" id="cascading"><span class="secno">6. </span><span class="content"> Cascading</span><a class="self-link" href="#cascading"></a></h2>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="cascade">cascade</dfn> takes an unordered list of <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value⑤">declared values</a> for a given property on a given element,
	sorts them by their declaration’s precedence as determined below,
	and outputs a single <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value⑦">cascaded value</a>.</p>
   <p>The cascade sorts declarations according to the following criteria,
	in descending order of priority:</p>
   <dl>
    <dt id="cascade-origin"><a class="self-link" href="#cascade-origin"></a>Origin and Importance 
    <dd>
      The <a data-link-type="dfn" href="#origin" id="ref-for-origin②">origin</a> of a declaration is based on where it comes from
			and its <a data-link-type="dfn" href="#important" id="ref-for-important">importance</a> is whether or not it is declared <span class="css">!important</span> (see below).
			The precedence of the various <span id="ref-for-origin③">origins</span> is, in descending order: 
     <ol>
      <li>Transition declarations <a data-link-type="biblio" href="#biblio-css-transitions-1">[css-transitions-1]</a> 
      <li>Important user agent declarations 
      <li>Important user declarations 
      <li>Important author declarations 
      <li>Animation declarations <a data-link-type="biblio" href="#biblio-css-animations-1">[css-animations-1]</a> 
      <li>Normal author declarations 
      <li>Normal user declarations 
      <li>Normal user agent declarations 
     </ol>
     <p>Declarations from <a data-link-type="dfn" href="#origin" id="ref-for-origin④">origins</a> earlier in this list win over declarations from later <span id="ref-for-origin⑤">origins</span>.</p>
    <dt id="cascade-specificity"><a class="self-link" href="#cascade-specificity"></a>Specificity 
    <dd> The <a href="https://www.w3.org/TR/selectors/#specificity">Selectors module</a> <a data-link-type="biblio" href="#biblio-select">[SELECT]</a> describes how to compute the specificity of a selector.
			Each declaration has the same specificity as the style rule it appears in.
			For the purpose of this step,
			declarations that do not belong to a style rule
			(such as the <a href="https://www.w3.org/TR/css-style-attr/#interpret">contents of a style attribute</a>)
			are considered to have a specificity higher than any selector.
			The declaration with the highest specificity wins. 
    <dt id="cascade-order"><a class="self-link" href="#cascade-order"></a>Order of Appearance 
    <dd>
      The last declaration in document order wins.
			For this purpose: 
     <ul>
      <li>Declarations from <a class="css" data-link-type="at-rule" href="#at-ruledef-import" id="ref-for-at-ruledef-import⑨">imported style sheets</a> are ordered as if their style sheets were substituted in place of the <span class="css" id="ref-for-at-ruledef-import①⓪">@import</span> rule. 
      <li>Declarations from style sheets independently linked by the originating document
					are treated as if they were concatenated in linking order,
					as determined by the host document language. 
      <li>Declarations from style attributes
					are ordered according to the document order of the element the style attribute appears on,
					and are all placed after any style sheets. 
     </ul>
   </dl>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="output-of-the-cascade">output of the cascade</dfn> is a (potentially empty) sorted list of <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value⑥">declared values</a> for each property on each element.</p>
   <h3 class="heading settled" data-level="6.1" id="cascading-origins"><span class="secno">6.1. </span><span class="content"> Cascading Origins</span><a class="self-link" href="#cascading-origins"></a></h3>
   <p>Each style rule has a <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-local-lt="origin" id="origin">cascade origin</dfn>,
	which determines where it enters the cascade.
	CSS defines three core <a data-link-type="dfn" href="#origin" id="ref-for-origin⑥">origins</a>:</p>
   <dl>
    <dt><dfn data-dfn-type="dfn" data-export data-lt="author origin|author style sheet" id="cascade-origin-author">Author Origin<a class="self-link" href="#cascade-origin-author"></a></dfn> 
    <dd> The author specifies style sheets for a source document
			according to the conventions of the document language.
			For instance, in HTML,
			style sheets may be included in the document or linked externally. 
    <dt><dfn data-dfn-type="dfn" data-export data-lt="user origin|user style sheet" id="cascade-origin-user">User Origin<a class="self-link" href="#cascade-origin-user"></a></dfn> 
    <dd> The user may be able to specify style information for a particular document.
			For example, the user may specify a file that contains a style sheet
			or the user agent may provide an interface that generates a user style sheet
			(or behaves as if it did). 
    <dt><dfn data-dfn-type="dfn" data-export data-lt="user agent origin|ua origin|user agent style sheet|ua style sheet" id="cascade-origin-ua">User Agent Origin<a class="self-link" href="#cascade-origin-ua"></a></dfn> 
    <dd> Conforming user agents must apply a default style sheet
			(or behave as if they did).
			A user agent’s default style sheet should present the elements of the document language
			in ways that satisfy general presentation expectations for the document language
			(e.g., for visual browsers, the EM element in HTML is presented using an italic font).
			See e.g. the <a href="https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints">HTML user agent style sheet</a>. <a data-link-type="biblio" href="#biblio-html">[HTML]</a> 
   </dl>
   <p>Extensions to CSS define the following additional <a data-link-type="dfn" href="#origin" id="ref-for-origin⑦">origins</a>:</p>
   <dl>
    <dt><dfn data-dfn-type="dfn" data-export id="cascade-origin-animation">Animation Origin<a class="self-link" href="#cascade-origin-animation"></a></dfn> 
    <dd> CSS Animations <a data-link-type="biblio" href="#biblio-css-animations-1">[css-animations-1]</a> generate “virtual” rules representing their effects when running. 
    <dt><dfn data-dfn-type="dfn" data-export id="cascade-origin-transition">Transition Origin<a class="self-link" href="#cascade-origin-transition"></a></dfn> 
    <dd> Like CSS Animations, CSS Transitions <a data-link-type="biblio" href="#biblio-css-transitions-1">[css-transitions-1]</a> generate “virtual” rules representing their effects when running. 
   </dl>
   <h3 class="heading settled" data-level="6.2" id="importance"><span class="secno">6.2. </span><span class="content"> Important Declarations: the <span class="css">!important</span> annotation</span><a class="self-link" href="#importance"></a></h3>
   <p>CSS attempts to create a balance of power between author and user style sheets.
	By default, rules in an author’s style sheet override those in a user’s style sheet,
	which override those in the user-agent’s default style sheet.
	To balance this, a declaration can be made <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="important">important</dfn>,
	which increases its weight in the cascade and inverts the order of precedence.</p>
   <p>A declaration is <a data-link-type="dfn" href="#important" id="ref-for-important①">important</a> if it has a <dfn data-dfn-type="dfn" data-export id="bang-important">!important<a class="self-link" href="#bang-important"></a></dfn> annotation,
	as defined by <a data-link-type="biblio" href="#biblio-css-syntax-3">[css-syntax-3]</a>.
	i.e. if the last two (non-whitespace, non-comment) tokens
	in its value are the delimiter token <span class="css">!</span> followed by the identifier token <span class="css">important</span>.</p>
   <div class="example" id="example-813b5c64">
    <a class="self-link" href="#example-813b5c64"></a> 
<pre class="lang-css highlight"><c- f>[hidden] </c-><c- p>{</c-> <c- k>display</c-><c- p>:</c-> none !important; }</pre>
   </div>
   <p>An <a data-link-type="dfn" href="#important" id="ref-for-important②">important</a> declaration takes precedence over a normal declaration.
	Author and user style sheets may contain <span class="css">!important</span> declarations,
	with user <span class="css">!important</span> declarations overriding author <span class="css">!important</span> declarations.
	This CSS feature improves accessibility of documents by giving users with special requirements
	(large fonts, color combinations, etc.)
	control over presentation.</p>
   <p>Important declarations from all origins take precedence over animations.
	This allows authors to override animated values in important cases.
	(Animated values normally override all other rules.) <a data-link-type="biblio" href="#biblio-css-animations-1">[css-animations-1]</a></p>
   <p>User agent style sheets may also contain <span class="css">!important</span> declarations.
	These override all author and user declarations.</p>
   <div class="example" id="example-b189d121">
    <a class="self-link" href="#example-b189d121"></a> The first rule in the user’s style sheet in the following example contains an <span class="css">!important</span> declaration,
		which overrides the corresponding declaration in the author’s style sheet.
		The declaration in the second rule will also win due to being marked <span class="css">!important</span>.
		However, the third declaration in the user’s style sheet is not <span class="css">!important</span> and will therefore lose to the second rule in the author’s style sheet
		(which happens to set style on a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①⓪">shorthand</a> property).
		Also, the third author rule will lose to the second author rule since the second declaration is <span class="css">!important</span>.
		This shows that <span class="css">!important</span> declarations have a function also within author style sheets. 
<pre class="lang-css highlight"><c- c>/* From the user’s style sheet */</c->
<c- f>p </c-><c- p>{</c-> <c- k>text-indent</c-><c- p>:</c-> <c- m>1</c-><c- l>em</c-> !important }
p { font-style: italic !important }
p { font-size: 18pt }

/* From the author’s style sheet */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }
</pre>
    <table class="data">
     <thead>
      <tr>
       <th>Property 
       <th>Winning value 
     <tbody>
      <tr>
       <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-text-3/#propdef-text-indent" id="ref-for-propdef-text-indent">text-indent</a> 
       <td><span class="css">1em</span> 
      <tr>
       <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-style" id="ref-for-propdef-font-style①">font-style</a> 
       <td><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#valdef-font-style-italic" id="ref-for-valdef-font-style-italic">italic</a> 
      <tr>
       <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size" id="ref-for-propdef-font-size②">font-size</a> 
       <td><span class="css">12pt</span> 
      <tr>
       <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-fonts-3/#propdef-font-family" id="ref-for-propdef-font-family①">font-family</a> 
       <td><a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-fonts-4/#valdef-font-family-sans-serif" id="ref-for-valdef-font-family-sans-serif">sans-serif</a> 
    </table>
   </div>
   <h3 class="heading settled" data-level="6.3" id="preshint"><span class="secno">6.3. </span><span class="content"> Precedence of Non-CSS Presentational Hints</span><a class="self-link" href="#preshint"></a></h3>
   <p>The UA may choose to honor presentational hints in a source document’s markup,
	for example the <code>bgcolor</code> attribute or <code><a data-link-type="element" href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element" id="ref-for-the-s-element">s</a></code> element in <a data-link-type="biblio" href="#biblio-html">[HTML]</a>.
	All document language-based styling must be translated to corresponding CSS rules
	and either enter the cascade at the user agent level or
	be treated as author level rules with a specificity of zero placed at the start of the author style sheet.
	A document language may define whether a presentational hint enters at the UA or author level of the cascade;
	if so, the UA must behave accordingly.
	For example, <a data-link-type="biblio" href="#biblio-svg11">[SVG11]</a> maps its presentation attributes into the author level.</p>
   <p class="note" role="note"><span>Note:</span> Presentational hints entering the cascade at the UA level can be overridden by author or user styles.
	Presentational hints entering the cascade at the author level can be overridden by author styles,
	but not by non-<span class="css">!important</span> user styles.
	Host languages should choose the appropriate level for presentational hints with these considerations in mind.</p>
   <h2 class="heading settled" data-level="7" id="defaulting"><span class="secno">7. </span><span class="content"> Defaulting</span><a class="self-link" href="#defaulting"></a></h2>
   <p>When the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade③">cascade</a> does not result in a value,
	the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①⓪">specified value</a> must be found some other way. <a data-link-type="dfn" href="#inherited-property" id="ref-for-inherited-property">Inherited properties</a> draw their defaults from their parent element through <a data-link-type="dfn" href="#inheritance" id="ref-for-inheritance③">inheritance</a>;
	all other properties take their <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value②">initial value</a>.
	Authors can explicitly request inheritance or initialization
	via the <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit">inherit</a> and <a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial">initial</a> keywords.</p>
   <h3 class="heading settled" data-level="7.1" id="initial-values"><span class="secno">7.1. </span><span class="content"> Initial Values</span><a class="self-link" href="#initial-values"></a></h3>
   <p>Each property has an <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="initial-value">initial value</dfn>,
	defined in the property’s definition table.
	If the property is not an <a data-link-type="dfn" href="#inherited-property" id="ref-for-inherited-property①">inherited property</a>,
	and the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade④">cascade</a> does not result in a value,
	then the <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①①">specified value</a> of the property is its <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value③">initial value</a>.</p>
   <h3 class="heading settled" data-level="7.2" id="inheriting"><span class="secno">7.2. </span><span class="content"> Inheritance</span><a class="self-link" href="#inheriting"></a></h3>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inheritance|inherit" id="inheritance">Inheritance</dfn> propagates property values from parent elements to their children.
	The <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="inherited-value">inherited value</dfn> of a property on an element
	is the <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value①⓪">computed value</a> of the property on the element’s parent element.
	For the root element,
	which has no parent element,
	the <a data-link-type="dfn" href="#inherited-value" id="ref-for-inherited-value">inherited value</a> is the <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value④">initial value</a> of the property.</p>
   <p>(Pseudo-elements inherit according to a fictional tag sequence described for each pseudo-element <a data-link-type="biblio" href="#biblio-select">[SELECT]</a>.)</p>
   <p>Some properties are <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="inherited property" id="inherited-property">inherited properties</dfn>,
	as defined in their property definition table.
	This means that,
	unless the cascade results in a value,
	the value will be determined by inheritance.</p>
   <p>A property can also be explicitly inherited. See the <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit①">inherit</a> keyword.</p>
   <p class="note" role="note"><span>Note:</span> Inheritance follows the document tree and is not intercepted by <a href="https://www.w3.org/TR/CSS2/visuren.html#box-gen">anonymous boxes</a>,
	or otherwise affected by manipulations of the box tree.</p>
   <h3 class="heading settled" data-level="7.3" id="defaulting-keywords"><span class="secno">7.3. </span><span class="content"> Explicit Defaulting</span><a class="self-link" href="#defaulting-keywords"></a></h3>
   <p>Several CSS-wide property values are defined below;
	declaring a property to have these values explicitly specifies a particular defaulting behavior.
	As specified in <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS Values and Units Level 3</a> <a data-link-type="biblio" href="#biblio-css-values-3">[css-values-3]</a>,
	all CSS properties can accept these values.</p>
   <h4 class="heading settled" data-level="7.3.1" id="initial"><span class="secno">7.3.1. </span><span class="content"> Resetting a Property: the <a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial①">initial</a> keyword</span><a class="self-link" href="#initial"></a></h4>
   <p>If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value⑧">cascaded value</a> is the <dfn class="dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-initial"><a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial②">initial</a></dfn> keyword,
	the property’s <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①②">specified value</a> is its <a data-link-type="dfn" href="#initial-value" id="ref-for-initial-value⑤">initial value</a>.</p>
   <h4 class="heading settled" data-level="7.3.2" id="inherit"><span class="secno">7.3.2. </span><span class="content"> Explicit Inheritance: the <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit②">inherit</a> keyword</span><a class="self-link" href="#inherit"></a></h4>
   <p>If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value⑨">cascaded value</a> of a property is the <dfn class="dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-inherit"><a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit③">inherit</a></dfn> keyword,
	the property’s <a data-link-type="dfn" href="#specified-value" id="ref-for-specified-value①③">specified</a> and <a data-link-type="dfn" href="#computed-value" id="ref-for-computed-value①①">computed values</a> are the <a data-link-type="dfn" href="#inherited-value" id="ref-for-inherited-value①">inherited value</a>.</p>
   <h4 class="heading settled" data-level="7.3.3" id="inherit-initial"><span class="secno">7.3.3. </span><span class="content"> Erasing All Declarations: the <a class="css" data-link-type="maybe" href="#valdef-all-unset" id="ref-for-valdef-all-unset">unset</a> keyword</span><a class="self-link" href="#inherit-initial"></a></h4>
   <p>If the <a data-link-type="dfn" href="#cascaded-value" id="ref-for-cascaded-value①⓪">cascaded value</a> of a property is the <dfn class="dfn-paneled css" data-dfn-for="all" data-dfn-type="value" data-export id="valdef-all-unset"><a class="css" data-link-type="maybe" href="#valdef-all-unset" id="ref-for-valdef-all-unset①">unset</a></dfn> keyword,
	then if it is an inherited property, this is treated as <a class="css" data-link-type="maybe" href="#valdef-all-inherit" id="ref-for-valdef-all-inherit④">inherit</a>,
	and if it is not, this is treated as <a class="css" data-link-type="maybe" href="#valdef-all-initial" id="ref-for-valdef-all-initial③">initial</a>.
	This keyword effectively erases all <a data-link-type="dfn" href="#declared-value" id="ref-for-declared-value⑦">declared values</a> occurring earlier in the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade⑤">cascade</a>,
	correctly inheriting or not as appropriate for the property
	(or all longhands of a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①①">shorthand</a>).</p>
   <h2 class="heading settled" data-level="8" id="changes"><span class="secno">8. </span><span class="content"> Changes</span><a class="self-link" href="#changes"></a></h2>
   <h3 class="heading settled" data-level="8.1" id="changes-2016"><span class="secno">8.1. </span><span class="content"> Changes Since the 19 May 2016 Candidate Recommendation</span><a class="self-link" href="#changes-2016"></a></h3>
   <p>The following non-trivial changes were made to this specification since the <a href="https://www.w3.org/TR/2016/CR-css-cascade-3-20160519/">19 May 2016 Candidate Recommendation</a>:</p>
   <ul>
    <li id="change-2016-custom-all">
     <a class="self-link" href="#change-2016-custom-all"></a> Clarified that <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property①">custom properties</a> are not reset by the <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all③">all</a> shorthand.
			(<a href="https://github.com/w3c/csswg-drafts/issues/2518">2518</a>) 
     <blockquote>
      <p>
       The <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all④">all</a> property is a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①②">shorthand</a> that resets <em>all</em> CSS properties
				except <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction②">direction</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi" id="ref-for-propdef-unicode-bidi②">unicode-bidi</a>.
				… 
       <ins>It does not reset <a data-link-type="dfn" href="https://drafts.csswg.org/css-variables-1/#custom-property" id="ref-for-custom-property②">custom properties</a> <a data-link-type="biblio" href="#biblio-css-variables-1">[css-variables-1]</a>.</ins>
      </p>
     </blockquote>
    <li id="change-2016-import">
     <a class="self-link" href="#change-2016-import"></a> Called out two exceptions in which importing a style sheet
			is different from merely inserting its contents. 
     <blockquote>
      <p>
       If an <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①①">@import</a> rule refers to a valid stylesheet,
				user agents must treat the contents of the stylesheet as if they were written in place of the <span class="css" id="ref-for-at-ruledef-import①②">@import</span> rule
       <ins>,
				with two exceptions:</ins>
      </p>
      <ins>
       <ul>
        <li>If a feature
						(such as the <span class="css">@namespace</span> rule) <em>explicitly</em> defines that it only applies to a particular stylesheet,
						and not any imported ones,
						then it doesn’t apply to the imported stylesheet. 
        <li>If a feature relies on the relative ordering of two or more constructs in a stylesheet
						(such as the requirement that <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-syntax-3/#at-ruledef-charset" id="ref-for-at-ruledef-charset②">@charset</a> must not have any other content preceding it),
						it only applies between constructs in the same stylesheet. 
       </ul>
      </ins>
     </blockquote>
    <li id="change-2016-scope"><a class="self-link" href="#change-2016-scope"></a> Removed any mention of scoped stylesheets,
			as the feature was removed from HTML.
			(<a href="https://github.com/w3c/csswg-drafts/issues/637">Issue 637</a>) 
    <li id="change-2016-override"><a class="self-link" href="#change-2016-override"></a> Removed any mention of the obsolete “override” origin,
			originally defined by <a href="https://www.w3.org/TR/2000/REC-DOM-Level-2-Style-20001113/">DOM Level 2 Style</a> and later abandoned. 
   </ul>
   <p>A <a href="https://drafts.csswg.org/css-cascade-3/issues-cr-2016">Disposition of Comments</a> is available.</p>
   <h3 class="heading settled" data-level="8.2" id="changes-2013"><span class="secno">8.2. </span><span class="content"> Changes Since the 3 October 2013 Candidate Recommendation</span><a class="self-link" href="#changes-2013"></a></h3>
   <p>The following changes were made to this specification since the <a href="https://www.w3.org/TR/2013/CR-css-cascade-3-20131003/">3 October 2013 Candidate Recommendation</a>:</p>
   <ul>
    <li>
     Defined <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#environment-encoding" id="ref-for-environment-encoding①">environment encoding</a> of imported style sheets. 
     <blockquote>
      <ins>
       <p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-syntax-3/#environment-encoding" id="ref-for-environment-encoding②">environment encoding</a> of an imported style sheet is the encoding of the style sheet that imported it. <a data-link-type="biblio" href="#biblio-css-syntax-3">[css-syntax-3]</a></p>
      </ins>
     </blockquote>
    <li>
     Referenced <a data-link-type="biblio" href="#biblio-css-syntax-3">[css-syntax-3]</a> for syntax of <span class="css">!important</span> rules. 
     <blockquote>
      <p>
       A declaration is <a data-link-type="dfn" href="#important" id="ref-for-important③">important</a> if it has a <span class="css">!important</span> annotation, 
       <ins>as defined by <a data-link-type="biblio" href="#biblio-css-syntax-3">[css-syntax-3]</a></ins>
       . 
      </p>
     </blockquote>
    <li>
     Explained <a data-link-type="dfn" href="#reset-only-sub-property" id="ref-for-reset-only-sub-property①">reset-only sub-properties</a> and clarified that they also get affected by a CSS-wide keyword value in the shorthand declaration. 
     <blockquote>
      <p>
       <ins>In other cases, a property might be a <a data-link-type="dfn" href="#reset-only-sub-property" id="ref-for-reset-only-sub-property②">reset-only sub-property</a> of the shorthand:
				Like other <a data-link-type="dfn" href="#longhand" id="ref-for-longhand①⓪">sub-properties</a>, it is reset to its initial value by the shorthand when unspecified,
				but the shorthand might not include syntax to set the <span id="ref-for-longhand①①">sub-property</span> to any of its other values.
				For example, the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border" id="ref-for-propdef-border①">border</a> shorthand resets <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image" id="ref-for-propdef-border-image①">border-image</a> to its initial value of <span class="css">none</span>,
				but has no syntax to set it to anything else. <a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a></ins>
      </p>
      <p>
       If a <a data-link-type="dfn" href="#shorthand-property" id="ref-for-shorthand-property①③">shorthand</a> is specified as one of the <a href="https://www.w3.org/TR/css3-values/#common-keywords">CSS-wide keywords</a> <a data-link-type="biblio" href="#biblio-css-values-3">[css-values-3]</a>,
				it sets all of its <a data-link-type="dfn" href="#longhand" id="ref-for-longhand①②">sub-properties</a> to that keyword, 
       <ins>including any that are <a data-link-type="dfn" href="#reset-only-sub-property" id="ref-for-reset-only-sub-property③">reset-only sub-properties</a></ins>
       .
				(Note that these keywords cannot be combined with other values in a single declaration, not even in a shorthand.)
      </p>
     </blockquote>
   </ul>
   <p>A <a href="https://drafts.csswg.org/css-cascade-3/issues-cr-2013">Disposition of Comments</a> is available. </p>
   <h3 class="heading settled" data-level="8.3" id="changes-2"><span class="secno">8.3. </span><span class="content"> Additions Since Level 2</span><a class="self-link" href="#changes-2"></a></h3>
   <p>The following features have been added since <a href="http://www.w3.org/TR/CSS2/cascade.html">Level 2</a>:</p>
   <ul>
    <li>The <a class="property" data-link-type="propdesc" href="#propdef-all" id="ref-for-propdef-all⑤">all</a> shorthand 
    <li>The <a class="css" data-link-type="maybe" href="#valdef-all-unset" id="ref-for-valdef-all-unset②">unset</a> keyword 
    <li>Incorporation of animations and transitions into the <a data-link-type="dfn" href="#cascade" id="ref-for-cascade⑥">cascade</a>. 
   </ul>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>David Baron, Simon Sapin, and Boris Zbarsky contributed to this specification.</p>
   <h2 class="no-num heading settled" id="priv-sec"><span class="content"> Privacy and Security Considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <ul>
    <li data-md>
     <p>The cascade process does not distinguish between same-origin and cross-origin stylesheets,
enabling the content of cross-origin stylesheets to be inferred
from the computed styles they apply to a document.</p>
    <li data-md>
     <p>User preferences and UA defaults expressed via application of style rules
are exposed by the cascade process,
and can be inferred from the computed styles they apply to a document.</p>
    <li data-md>
     <p>The <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①③">@import</a> rule does not apply the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#cors-protocol" id="ref-for-cors-protocol">CORS protocol</a> to loading cross-origin stylesheets,
instead allowing them to be freely imported and applied.</p>
    <li data-md>
     <p>The <a class="css" data-link-type="maybe" href="#at-ruledef-import" id="ref-for-at-ruledef-import①④">@import</a> rule assumes that resources without <a href="https://html.spec.whatwg.org/multipage/urls-and-fetching.html#content-type"><code>Content-Type</code> metadata</a> (or any same-origin file if the host document is in quirks mode)
are <code>text/css</code>,
potentially allowing arbitrary files to be imported into the page
and interpreted as CSS,
potentially allowing sensitive data to be inferred from the computed styles they apply to a document.</p>
   </ul>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#actual-value">actual value</a><span>, in §4.6</span>
   <li><a href="#propdef-all">all</a><span>, in §3.1</span>
   <li><a href="#cascade-origin-animation">Animation Origin</a><span>, in §6.1</span>
   <li><a href="#cascade-origin-author">author origin</a><span>, in §6.1</span>
   <li><a href="#cascade-origin-author">author style sheet</a><span>, in §6.1</span>
   <li><a href="#cascade">cascade</a><span>, in §6</span>
   <li><a href="#cascaded-value">cascaded value</a><span>, in §4.2</span>
   <li><a href="#origin">cascade origin</a><span>, in §6.1</span>
   <li><a href="#computed-value">computed value</a><span>, in §4.4</span>
   <li><a href="#declared-value">declared value</a><span>, in §4.1</span>
   <li><a href="#at-ruledef-import">@import</a><span>, in §2</span>
   <li><a href="#bang-important">!important</a><span>, in §6.2</span>
   <li><a href="#important">important</a><span>, in §6.2</span>
   <li><a href="#import-conditions">import conditions</a><span>, in §2</span>
   <li>
    inherit
    <ul>
     <li><a href="#inheritance">definition of</a><span>, in §7.2</span>
     <li><a href="#valdef-all-inherit">value for all</a><span>, in §7.3.2</span>
    </ul>
   <li><a href="#inheritance">inheritance</a><span>, in §7.2</span>
   <li><a href="#inherited-property">inherited property</a><span>, in §7.2</span>
   <li><a href="#inherited-value">inherited value</a><span>, in §7.2</span>
   <li><a href="#valdef-all-initial">initial</a><span>, in §7.3.1</span>
   <li><a href="#initial-value">initial value</a><span>, in §7.1</span>
   <li><a href="#longhand">longhand</a><span>, in §3</span>
   <li><a href="#longhand">longhand property</a><span>, in §3</span>
   <li><a href="#origin">origin</a><span>, in §6.1</span>
   <li><a href="#output-of-the-cascade">output of the cascade</a><span>, in §6</span>
   <li><a href="#reset-only-sub-property">reset-only sub-property</a><span>, in §3</span>
   <li><a href="#shorthand-property">shorthand</a><span>, in §3</span>
   <li><a href="#shorthand-property">shorthand property</a><span>, in §3</span>
   <li><a href="#specified-value">specified value</a><span>, in §4.3</span>
   <li><a href="#longhand">sub-property</a><span>, in §3</span>
   <li><a href="#cascade-origin-transition">Transition Origin</a><span>, in §6.1</span>
   <li><a href="#cascade-origin-ua">ua origin</a><span>, in §6.1</span>
   <li><a href="#cascade-origin-ua">ua style sheet</a><span>, in §6.1</span>
   <li><a href="#valdef-all-unset">unset</a><span>, in §7.3.3</span>
   <li><a href="#used-value">used value</a><span>, in §4.5</span>
   <li><a href="#cascade-origin-ua">user agent origin</a><span>, in §6.1</span>
   <li><a href="#cascade-origin-ua">user agent style sheet</a><span>, in §6.1</span>
   <li><a href="#cascade-origin-user">user origin</a><span>, in §6.1</span>
   <li><a href="#cascade-origin-user">user style sheet</a><span>, in §6.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-background">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background">https://drafts.csswg.org/css-backgrounds-3/#propdef-background</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background">3. 
Shorthand Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-color">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-color</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-color">3. 
Shorthand Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-background-image">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image">https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-background-image">3. 
Shorthand Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border">https://drafts.csswg.org/css-backgrounds-3/#propdef-border</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border">3. 
Shorthand Properties</a>
    <li><a href="#ref-for-propdef-border①">8.2. 
Changes Since the 3 October 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-width">4.7. 
Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-image">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-image</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-image">3. 
Shorthand Properties</a>
    <li><a href="#ref-for-propdef-border-image①">8.2. 
Changes Since the 3 October 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-left-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-left-width">4.7. 
Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-right-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-right-width">4.7. 
Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-width">4.7. 
Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-break-before">
   <a href="https://drafts.csswg.org/css-break-3/#propdef-break-before">https://drafts.csswg.org/css-break-3/#propdef-break-before</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-break-before">4.5. 
Used Values</a> <a href="#ref-for-propdef-break-before①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-orphans">
   <a href="https://drafts.csswg.org/css-break-3/#propdef-orphans">https://drafts.csswg.org/css-break-3/#propdef-orphans</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-orphans">4.6. 
Actual Values</a>
    <li><a href="#ref-for-propdef-orphans①">4.7. 
Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-break-before-page">
   <a href="https://drafts.csswg.org/css-break-4/#valdef-break-before-page">https://drafts.csswg.org/css-break-4/#valdef-break-before-page</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-break-before-page">4.5. 
Used Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-color-red">
   <a href="https://drafts.csswg.org/css-color-4/#valdef-color-red">https://drafts.csswg.org/css-color-4/#valdef-color-red</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-color-red">4.4. 
Computed Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-flex">
   <a href="https://drafts.csswg.org/css-flexbox-1/#propdef-flex">https://drafts.csswg.org/css-flexbox-1/#propdef-flex</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-flex">4.5. 
Used Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-flex-item">
   <a href="https://drafts.csswg.org/css-flexbox-1/#flex-item">https://drafts.csswg.org/css-flexbox-1/#flex-item</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-flex-item">4.5. 
Used Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font">https://drafts.csswg.org/css-fonts-3/#propdef-font</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font">3. 
Shorthand Properties</a> <a href="#ref-for-propdef-font①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-family">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-family">https://drafts.csswg.org/css-fonts-3/#propdef-font-family</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-family">3. 
Shorthand Properties</a>
    <li><a href="#ref-for-propdef-font-family①">6.2. 
Important Declarations: the !important annotation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-size">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-size">https://drafts.csswg.org/css-fonts-3/#propdef-font-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-size">3. 
Shorthand Properties</a>
    <li><a href="#ref-for-propdef-font-size①">4.7. 
Examples</a>
    <li><a href="#ref-for-propdef-font-size②">6.2. 
Important Declarations: the !important annotation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-style">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-style">https://drafts.csswg.org/css-fonts-3/#propdef-font-style</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-style">3. 
Shorthand Properties</a>
    <li><a href="#ref-for-propdef-font-style①">6.2. 
Important Declarations: the !important annotation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-variant">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-variant">https://drafts.csswg.org/css-fonts-3/#propdef-font-variant</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-variant">3. 
Shorthand Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-weight">
   <a href="https://drafts.csswg.org/css-fonts-3/#propdef-font-weight">https://drafts.csswg.org/css-fonts-3/#propdef-font-weight</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-weight">3. 
Shorthand Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-font-weight-bolder">
   <a href="https://drafts.csswg.org/css-fonts-4/#valdef-font-weight-bolder">https://drafts.csswg.org/css-fonts-4/#valdef-font-weight-bolder</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-font-weight-bolder">4.4. 
Computed Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-font-size-adjust">
   <a href="https://drafts.csswg.org/css-fonts-4/#propdef-font-size-adjust">https://drafts.csswg.org/css-fonts-4/#propdef-font-size-adjust</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-font-size-adjust">4.6. 
Actual Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-font-style-italic">
   <a href="https://drafts.csswg.org/css-fonts-4/#valdef-font-style-italic">https://drafts.csswg.org/css-fonts-4/#valdef-font-style-italic</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-font-style-italic">6.2. 
Important Declarations: the !important annotation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-font-family-sans-serif">
   <a href="https://drafts.csswg.org/css-fonts-4/#valdef-font-family-sans-serif">https://drafts.csswg.org/css-fonts-4/#valdef-font-family-sans-serif</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-font-family-sans-serif">6.2. 
Important Declarations: the !important annotation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-list-style-position">
   <a href="https://drafts.csswg.org/css-lists-3/#propdef-list-style-position">https://drafts.csswg.org/css-lists-3/#propdef-list-style-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-list-style-position">4.7. 
Examples</a> <a href="#ref-for-propdef-list-style-position①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-scroll-padding-auto">
   <a href="https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-padding-auto">https://drafts.csswg.org/css-scroll-snap-1/#valdef-scroll-padding-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-scroll-padding-auto">4.4. 
Computed Values</a>
    <li><a href="#ref-for-valdef-scroll-padding-auto①">4.5. 
Used Values</a> <a href="#ref-for-valdef-scroll-padding-auto②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-at-ruledef-charset">
   <a href="https://drafts.csswg.org/css-syntax-3/#at-ruledef-charset">https://drafts.csswg.org/css-syntax-3/#at-ruledef-charset</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-ruledef-charset">2. 
Importing Style Sheets: the @import rule</a> <a href="#ref-for-at-ruledef-charset①">(2)</a>
    <li><a href="#ref-for-at-ruledef-charset②">8.1. 
Changes Since the 19 May 2016 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-environment-encoding">
   <a href="https://drafts.csswg.org/css-syntax-3/#environment-encoding">https://drafts.csswg.org/css-syntax-3/#environment-encoding</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-environment-encoding">2. 
Importing Style Sheets: the @import rule</a>
    <li><a href="#ref-for-environment-encoding①">8.2. 
Changes Since the 3 October 2013 Candidate Recommendation</a> <a href="#ref-for-environment-encoding②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-align">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-text-align">https://drafts.csswg.org/css-text-3/#propdef-text-align</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-align">4.7. 
Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-text-indent">
   <a href="https://drafts.csswg.org/css-text-3/#propdef-text-indent">https://drafts.csswg.org/css-text-3/#propdef-text-indent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-text-indent">6.2. 
Important Declarations: the !important annotation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-string-value">
   <a href="https://drafts.csswg.org/css-values-3/#string-value">https://drafts.csswg.org/css-values-3/#string-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-string-value">2. 
Importing Style Sheets: the @import rule</a> <a href="#ref-for-string-value①">(2)</a> <a href="#ref-for-string-value②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-url-value">
   <a href="https://drafts.csswg.org/css-values-3/#url-value">https://drafts.csswg.org/css-values-3/#url-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-url-value">2. 
Importing Style Sheets: the @import rule</a> <a href="#ref-for-url-value①">(2)</a> <a href="#ref-for-url-value②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mult-opt">
   <a href="https://drafts.csswg.org/css-values-4/#mult-opt">https://drafts.csswg.org/css-values-4/#mult-opt</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mult-opt">2. 
Importing Style Sheets: the @import rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-wide-keywords">
   <a href="https://drafts.csswg.org/css-values-4/#css-wide-keywords">https://drafts.csswg.org/css-values-4/#css-wide-keywords</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-wide-keywords">4.3. 
Specified Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-em">
   <a href="https://drafts.csswg.org/css-values-4/#em">https://drafts.csswg.org/css-values-4/#em</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-em">4.4. 
Computed Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ex">
   <a href="https://drafts.csswg.org/css-values-4/#ex">https://drafts.csswg.org/css-values-4/#ex</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ex">4.4. 
Computed Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-funcdef-url">
   <a href="https://drafts.csswg.org/css-values-4/#funcdef-url">https://drafts.csswg.org/css-values-4/#funcdef-url</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-funcdef-url">2. 
Importing Style Sheets: the @import rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-vh">
   <a href="https://drafts.csswg.org/css-values-4/#vh">https://drafts.csswg.org/css-values-4/#vh</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vh">4.4. 
Computed Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-vw">
   <a href="https://drafts.csswg.org/css-values-4/#vw">https://drafts.csswg.org/css-values-4/#vw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vw">4.4. 
Computed Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">2. 
Importing Style Sheets: the @import rule</a>
    <li><a href="#ref-for-comb-one①">3.1. 
Resetting All Properties: the all property</a> <a href="#ref-for-comb-one②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-custom-property">
   <a href="https://drafts.csswg.org/css-variables-1/#custom-property">https://drafts.csswg.org/css-variables-1/#custom-property</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-custom-property">3.1. 
Resetting All Properties: the all property</a>
    <li><a href="#ref-for-custom-property①">8.1. 
Changes Since the 19 May 2016 Candidate Recommendation</a> <a href="#ref-for-custom-property②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-direction">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">https://drafts.csswg.org/css-writing-modes-3/#propdef-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-direction">3.1. 
Resetting All Properties: the all property</a> <a href="#ref-for-propdef-direction①">(2)</a>
    <li><a href="#ref-for-propdef-direction②">8.1. 
Changes Since the 19 May 2016 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-unicode-bidi">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi">https://drafts.csswg.org/css-writing-modes-3/#propdef-unicode-bidi</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-unicode-bidi">3.1. 
Resetting All Properties: the all property</a> <a href="#ref-for-propdef-unicode-bidi①">(2)</a>
    <li><a href="#ref-for-propdef-unicode-bidi②">8.1. 
Changes Since the 19 May 2016 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-display">https://drafts.csswg.org/css2/visuren.html#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">3.1. 
Resetting All Properties: the all property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">https://drafts.csswg.org/css2/visudet.html#propdef-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-height">4.7. 
Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-line-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-line-height">https://drafts.csswg.org/css2/visudet.html#propdef-line-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-line-height">3. 
Shorthand Properties</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-page-break-after">
   <a href="https://drafts.csswg.org/css2/page.html#propdef-page-break-after">https://drafts.csswg.org/css2/page.html#propdef-page-break-after</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-page-break-after">4.6. 
Actual Values</a>
    <li><a href="#ref-for-propdef-page-break-after①">4.7. 
Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">https://drafts.csswg.org/css2/visudet.html#propdef-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-width">4.5. 
Used Values</a>
    <li><a href="#ref-for-propdef-width①">4.7. 
Examples</a> <a href="#ref-for-propdef-width②">(2)</a> <a href="#ref-for-propdef-width③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-at-ruledef-media">
   <a href="https://drafts.csswg.org/css-conditional-3/#at-ruledef-media">https://drafts.csswg.org/css-conditional-3/#at-ruledef-media</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-ruledef-media">2. 
Importing Style Sheets: the @import rule</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-window-getcomputedstyle">
   <a href="https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle">https://drafts.csswg.org/cssom-1/#dom-window-getcomputedstyle</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-getcomputedstyle">4.4. 
Computed Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cors-protocol">
   <a href="https://fetch.spec.whatwg.org/#cors-protocol">https://fetch.spec.whatwg.org/#cors-protocol</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cors-protocol"> Privacy and Security Considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-s-element">
   <a href="https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element">https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-s-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-s-element">6.3. 
Precedence of Non-CSS Presentational Hints</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-media-query-list">
   <a href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list">https://drafts.csswg.org/mediaqueries-4/#typedef-media-query-list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-media-query-list">2. 
Importing Style Sheets: the @import rule</a> <a href="#ref-for-typedef-media-query-list①">(2)</a> <a href="#ref-for-typedef-media-query-list②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-media-query">
   <a href="https://drafts.csswg.org/mediaqueries-4/#typedef-media-query">https://drafts.csswg.org/mediaqueries-4/#typedef-media-query</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-media-query">1.1. 
Module Interactions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-media-all">
   <a href="https://drafts.csswg.org/mediaqueries-4/#valdef-media-all">https://drafts.csswg.org/mediaqueries-4/#valdef-media-all</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-media-all">2. 
Importing Style Sheets: the @import rule</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-background" style="color:initial">background</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-color" style="color:initial">background-color</span>
     <li><span class="dfn-paneled" id="term-for-propdef-background-image" style="color:initial">background-image</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border" style="color:initial">border</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-width" style="color:initial">border-bottom-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-image" style="color:initial">border-image</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-left-width" style="color:initial">border-left-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-right-width" style="color:initial">border-right-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-width" style="color:initial">border-top-width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-break-before" style="color:initial">break-before</span>
     <li><span class="dfn-paneled" id="term-for-propdef-orphans" style="color:initial">orphans</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-break-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-break-before-page" style="color:initial">page</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-color-red" style="color:initial">red</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-flexbox-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-flex" style="color:initial">flex</span>
     <li><span class="dfn-paneled" id="term-for-flex-item" style="color:initial">flex item</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-font" style="color:initial">font</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-family" style="color:initial">font-family</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-size" style="color:initial">font-size</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-style" style="color:initial">font-style</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-variant" style="color:initial">font-variant</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-weight" style="color:initial">font-weight</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-fonts-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-font-weight-bolder" style="color:initial">bolder</span>
     <li><span class="dfn-paneled" id="term-for-propdef-font-size-adjust" style="color:initial">font-size-adjust</span>
     <li><span class="dfn-paneled" id="term-for-valdef-font-style-italic" style="color:initial">italic</span>
     <li><span class="dfn-paneled" id="term-for-valdef-font-family-sans-serif" style="color:initial">sans-serif</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-lists-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-list-style-position" style="color:initial">list-style-position</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-scroll-snap-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-scroll-padding-auto" style="color:initial">auto</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-syntax-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-at-ruledef-charset" style="color:initial">@charset</span>
     <li><span class="dfn-paneled" id="term-for-environment-encoding" style="color:initial">environment encoding</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-text-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-text-align" style="color:initial">text-align</span>
     <li><span class="dfn-paneled" id="term-for-propdef-text-indent" style="color:initial">text-indent</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-string-value" style="color:initial">&lt;string></span>
     <li><span class="dfn-paneled" id="term-for-url-value" style="color:initial">&lt;url></span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mult-opt" style="color:initial">?</span>
     <li><span class="dfn-paneled" id="term-for-css-wide-keywords" style="color:initial">css-wide keywords</span>
     <li><span class="dfn-paneled" id="term-for-em" style="color:initial">em</span>
     <li><span class="dfn-paneled" id="term-for-ex" style="color:initial">ex</span>
     <li><span class="dfn-paneled" id="term-for-funcdef-url" style="color:initial">url()</span>
     <li><span class="dfn-paneled" id="term-for-vh" style="color:initial">vh</span>
     <li><span class="dfn-paneled" id="term-for-vw" style="color:initial">vw</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-variables-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-custom-property" style="color:initial">custom property</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-direction" style="color:initial">direction</span>
     <li><span class="dfn-paneled" id="term-for-propdef-unicode-bidi" style="color:initial">unicode-bidi</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-propdef-height" style="color:initial">height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-line-height" style="color:initial">line-height</span>
     <li><span class="dfn-paneled" id="term-for-propdef-page-break-after" style="color:initial">page-break-after</span>
     <li><span class="dfn-paneled" id="term-for-propdef-width" style="color:initial">width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3-CONDITIONAL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-at-ruledef-media" style="color:initial">@media</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSSOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-window-getcomputedstyle" style="color:initial">getComputedStyle(elt)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FETCH]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cors-protocol" style="color:initial">cors protocol</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-s-element" style="color:initial">s</span>
    </ul>
   <li>
    <a data-link-type="biblio">[MEDIAQ]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-media-query-list" style="color:initial">&lt;media-query-list></span>
     <li><span class="dfn-paneled" id="term-for-typedef-media-query" style="color:initial">&lt;media-query></span>
     <li><span class="dfn-paneled" id="term-for-valdef-media-all" style="color:initial">all</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-animations-1">[CSS-ANIMATIONS-1]
   <dd>Dean Jackson; et al. <a href="https://www.w3.org/TR/css-animations-1/">CSS Animations Level 1</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-animations-1/">https://www.w3.org/TR/css-animations-1/</a>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-break-3">[CSS-BREAK-3]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-3/">CSS Fragmentation Module Level 3</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/css-break-3/">https://www.w3.org/TR/css-break-3/</a>
   <dt id="biblio-css-fonts-3">[CSS-FONTS-3]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-3/">CSS Fonts Module Level 3</a>. 20 September 2018. REC. URL: <a href="https://www.w3.org/TR/css-fonts-3/">https://www.w3.org/TR/css-fonts-3/</a>
   <dt id="biblio-css-fonts-4">[CSS-FONTS-4]
   <dd>John Daggett; Myles Maxfield; Chris Lilley. <a href="https://www.w3.org/TR/css-fonts-4/">CSS Fonts Module Level 4</a>. 20 September 2018. WD. URL: <a href="https://www.w3.org/TR/css-fonts-4/">https://www.w3.org/TR/css-fonts-4/</a>
   <dt id="biblio-css-lists-3">[CSS-LISTS-3]
   <dd>Elika Etemad; Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-lists-3/">CSS Lists Module Level 3</a>. 25 April 2019. WD. URL: <a href="https://www.w3.org/TR/css-lists-3/">https://www.w3.org/TR/css-lists-3/</a>
   <dt id="biblio-css-syntax-3">[CSS-SYNTAX-3]
   <dd>Tab Atkins Jr.; Simon Sapin. <a href="https://www.w3.org/TR/css-syntax-3/">CSS Syntax Module Level 3</a>. 20 February 2014. CR. URL: <a href="https://www.w3.org/TR/css-syntax-3/">https://www.w3.org/TR/css-syntax-3/</a>
   <dt id="biblio-css-text-3">[CSS-TEXT-3]
   <dd>Elika Etemad; Koji Ishii; Florian Rivoal. <a href="https://www.w3.org/TR/css-text-3/">CSS Text Module Level 3</a>. 12 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-text-3/">https://www.w3.org/TR/css-text-3/</a>
   <dt id="biblio-css-transitions-1">[CSS-TRANSITIONS-1]
   <dd>David Baron; et al. <a href="https://www.w3.org/TR/css-transitions-1/">CSS Transitions</a>. 11 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-transitions-1/">https://www.w3.org/TR/css-transitions-1/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-variables-1">[CSS-VARIABLES-1]
   <dd>Tab Atkins Jr.. <a href="https://www.w3.org/TR/css-variables-1/">CSS Custom Properties for Cascading Variables Module Level 1</a>. 3 December 2015. CR. URL: <a href="https://www.w3.org/TR/css-variables-1/">https://www.w3.org/TR/css-variables-1/</a>
   <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3-conditional">[CSS3-CONDITIONAL]
   <dd>David Baron. <a href="https://www.w3.org/TR/css3-conditional/">CSS Conditional Rules Module Level 3</a>. 4 April 2013. CR. URL: <a href="https://www.w3.org/TR/css3-conditional/">https://www.w3.org/TR/css3-conditional/</a>
   <dt id="biblio-fetch">[FETCH]
   <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-mediaq">[MEDIAQ]
   <dd>Florian Rivoal; Tab Atkins Jr.. <a href="https://www.w3.org/TR/mediaqueries-4/">Media Queries Level 4</a>. 5 September 2017. CR. URL: <a href="https://www.w3.org/TR/mediaqueries-4/">https://www.w3.org/TR/mediaqueries-4/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-select">[SELECT]
   <dd>Tantek Çelik; et al. <a href="https://www.w3.org/TR/selectors-3/">Selectors Level 3</a>. 6 November 2018. REC. URL: <a href="https://www.w3.org/TR/selectors-3/">https://www.w3.org/TR/selectors-3/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css-break-4">[CSS-BREAK-4]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-break-4/">CSS Fragmentation Module Level 4</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-break-4/">https://www.w3.org/TR/css-break-4/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-flexbox-1">[CSS-FLEXBOX-1]
   <dd>Tab Atkins Jr.; et al. <a href="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout Module Level 1</a>. 19 November 2018. CR. URL: <a href="https://www.w3.org/TR/css-flexbox-1/">https://www.w3.org/TR/css-flexbox-1/</a>
   <dt id="biblio-css-page-3">[CSS-PAGE-3]
   <dd>Elika Etemad; Simon Sapin. <a href="https://www.w3.org/TR/css-page-3/">CSS Paged Media Module Level 3</a>. 18 October 2018. WD. URL: <a href="https://www.w3.org/TR/css-page-3/">https://www.w3.org/TR/css-page-3/</a>
   <dt id="biblio-css-scroll-snap-1">[CSS-SCROLL-SNAP-1]
   <dd>Matt Rakow; et al. <a href="https://www.w3.org/TR/css-scroll-snap-1/">CSS Scroll Snap Module Level 1</a>. 19 March 2019. CR. URL: <a href="https://www.w3.org/TR/css-scroll-snap-1/">https://www.w3.org/TR/css-scroll-snap-1/</a>
   <dt id="biblio-cssom">[CSSOM]
   <dd>Simon Pieters; Glenn Adams. <a href="https://www.w3.org/TR/cssom-1/">CSS Object Model (CSSOM)</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-1/">https://www.w3.org/TR/cssom-1/</a>
   <dt id="biblio-svg11">[SVG11]
   <dd>Erik Dahlström; et al. <a href="https://www.w3.org/TR/SVG11/">Scalable Vector Graphics (SVG) 1.1 (Second Edition)</a>. 16 August 2011. REC. URL: <a href="https://www.w3.org/TR/SVG11/">https://www.w3.org/TR/SVG11/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-all" id="ref-for-propdef-all⑥">all</a>
      <td>initial | inherit | unset
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>see individual properties
      <td>per grammar
      <td>see individual properties
   </table>
  </div>
  <aside class="dfn-panel" data-for="at-ruledef-import">
   <b><a href="#at-ruledef-import">#at-ruledef-import</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-at-ruledef-import">2. 
Importing Style Sheets: the @import rule</a> <a href="#ref-for-at-ruledef-import①">(2)</a> <a href="#ref-for-at-ruledef-import②">(3)</a> <a href="#ref-for-at-ruledef-import③">(4)</a> <a href="#ref-for-at-ruledef-import④">(5)</a> <a href="#ref-for-at-ruledef-import⑤">(6)</a> <a href="#ref-for-at-ruledef-import⑥">(7)</a> <a href="#ref-for-at-ruledef-import⑦">(8)</a> <a href="#ref-for-at-ruledef-import⑧">(9)</a>
    <li><a href="#ref-for-at-ruledef-import⑨">6. 
Cascading</a> <a href="#ref-for-at-ruledef-import①⓪">(2)</a>
    <li><a href="#ref-for-at-ruledef-import①①">8.1. 
Changes Since the 19 May 2016 Candidate Recommendation</a> <a href="#ref-for-at-ruledef-import①②">(2)</a>
    <li><a href="#ref-for-at-ruledef-import①③"> Privacy and Security Considerations</a> <a href="#ref-for-at-ruledef-import①④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="import-conditions">
   <b><a href="#import-conditions">#import-conditions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-import-conditions">2. 
Importing Style Sheets: the @import rule</a> <a href="#ref-for-import-conditions①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="shorthand-property">
   <b><a href="#shorthand-property">#shorthand-property</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-shorthand-property">3. 
Shorthand Properties</a> <a href="#ref-for-shorthand-property①">(2)</a> <a href="#ref-for-shorthand-property②">(3)</a> <a href="#ref-for-shorthand-property③">(4)</a> <a href="#ref-for-shorthand-property④">(5)</a> <a href="#ref-for-shorthand-property⑤">(6)</a> <a href="#ref-for-shorthand-property⑥">(7)</a> <a href="#ref-for-shorthand-property⑦">(8)</a> <a href="#ref-for-shorthand-property⑧">(9)</a>
    <li><a href="#ref-for-shorthand-property⑨">3.1. 
Resetting All Properties: the all property</a>
    <li><a href="#ref-for-shorthand-property①⓪">6.2. 
Important Declarations: the !important annotation</a>
    <li><a href="#ref-for-shorthand-property①①">7.3.3. 
Erasing All Declarations: the unset keyword</a>
    <li><a href="#ref-for-shorthand-property①②">8.1. 
Changes Since the 19 May 2016 Candidate Recommendation</a>
    <li><a href="#ref-for-shorthand-property①③">8.2. 
Changes Since the 3 October 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="longhand">
   <b><a href="#longhand">#longhand</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-longhand">3. 
Shorthand Properties</a> <a href="#ref-for-longhand①">(2)</a> <a href="#ref-for-longhand②">(3)</a> <a href="#ref-for-longhand③">(4)</a> <a href="#ref-for-longhand④">(5)</a> <a href="#ref-for-longhand⑤">(6)</a> <a href="#ref-for-longhand⑥">(7)</a> <a href="#ref-for-longhand⑦">(8)</a> <a href="#ref-for-longhand⑧">(9)</a> <a href="#ref-for-longhand⑨">(10)</a>
    <li><a href="#ref-for-longhand①⓪">8.2. 
Changes Since the 3 October 2013 Candidate Recommendation</a> <a href="#ref-for-longhand①①">(2)</a> <a href="#ref-for-longhand①②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="reset-only-sub-property">
   <b><a href="#reset-only-sub-property">#reset-only-sub-property</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reset-only-sub-property">3. 
Shorthand Properties</a>
    <li><a href="#ref-for-reset-only-sub-property①">8.2. 
Changes Since the 3 October 2013 Candidate Recommendation</a> <a href="#ref-for-reset-only-sub-property②">(2)</a> <a href="#ref-for-reset-only-sub-property③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-all">
   <b><a href="#propdef-all">#propdef-all</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-all">3.1. 
Resetting All Properties: the all property</a> <a href="#ref-for-propdef-all①">(2)</a> <a href="#ref-for-propdef-all②">(3)</a>
    <li><a href="#ref-for-propdef-all③">8.1. 
Changes Since the 19 May 2016 Candidate Recommendation</a> <a href="#ref-for-propdef-all④">(2)</a>
    <li><a href="#ref-for-propdef-all⑤">8.3. 
Additions Since Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="declared-value">
   <b><a href="#declared-value">#declared-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-declared-value">4. 
Value Processing</a> <a href="#ref-for-declared-value①">(2)</a>
    <li><a href="#ref-for-declared-value②">4.2. 
Cascaded Values</a>
    <li><a href="#ref-for-declared-value③">5. 
Filtering</a> <a href="#ref-for-declared-value④">(2)</a>
    <li><a href="#ref-for-declared-value⑤">6. 
Cascading</a> <a href="#ref-for-declared-value⑥">(2)</a>
    <li><a href="#ref-for-declared-value⑦">7.3.3. 
Erasing All Declarations: the unset keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cascaded-value">
   <b><a href="#cascaded-value">#cascaded-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascaded-value">4. 
Value Processing</a> <a href="#ref-for-cascaded-value①">(2)</a>
    <li><a href="#ref-for-cascaded-value②">4.2. 
Cascaded Values</a>
    <li><a href="#ref-for-cascaded-value③">4.3. 
Specified Values</a> <a href="#ref-for-cascaded-value④">(2)</a> <a href="#ref-for-cascaded-value⑤">(3)</a> <a href="#ref-for-cascaded-value⑥">(4)</a>
    <li><a href="#ref-for-cascaded-value⑦">6. 
Cascading</a>
    <li><a href="#ref-for-cascaded-value⑧">7.3.1. 
Resetting a Property: the initial keyword</a>
    <li><a href="#ref-for-cascaded-value⑨">7.3.2. 
Explicit Inheritance: the inherit keyword</a>
    <li><a href="#ref-for-cascaded-value①⓪">7.3.3. 
Erasing All Declarations: the unset keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="specified-value">
   <b><a href="#specified-value">#specified-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-specified-value">1. 
Introduction</a>
    <li><a href="#ref-for-specified-value①">4. 
Value Processing</a> <a href="#ref-for-specified-value②">(2)</a>
    <li><a href="#ref-for-specified-value③">4.3. 
Specified Values</a> <a href="#ref-for-specified-value④">(2)</a> <a href="#ref-for-specified-value⑤">(3)</a> <a href="#ref-for-specified-value⑥">(4)</a>
    <li><a href="#ref-for-specified-value⑦">4.4. 
Computed Values</a> <a href="#ref-for-specified-value⑧">(2)</a> <a href="#ref-for-specified-value⑨">(3)</a>
    <li><a href="#ref-for-specified-value①⓪">7. 
Defaulting</a>
    <li><a href="#ref-for-specified-value①①">7.1. 
Initial Values</a>
    <li><a href="#ref-for-specified-value①②">7.3.1. 
Resetting a Property: the initial keyword</a>
    <li><a href="#ref-for-specified-value①③">7.3.2. 
Explicit Inheritance: the inherit keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="computed-value">
   <b><a href="#computed-value">#computed-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-computed-value">4. 
Value Processing</a> <a href="#ref-for-computed-value①">(2)</a>
    <li><a href="#ref-for-computed-value②">4.4. 
Computed Values</a> <a href="#ref-for-computed-value③">(2)</a> <a href="#ref-for-computed-value④">(3)</a> <a href="#ref-for-computed-value⑤">(4)</a> <a href="#ref-for-computed-value⑥">(5)</a> <a href="#ref-for-computed-value⑦">(6)</a>
    <li><a href="#ref-for-computed-value⑧">4.5. 
Used Values</a> <a href="#ref-for-computed-value⑨">(2)</a>
    <li><a href="#ref-for-computed-value①⓪">7.2. 
Inheritance</a>
    <li><a href="#ref-for-computed-value①①">7.3.2. 
Explicit Inheritance: the inherit keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="used-value">
   <b><a href="#used-value">#used-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-used-value">4. 
Value Processing</a> <a href="#ref-for-used-value①">(2)</a> <a href="#ref-for-used-value②">(3)</a>
    <li><a href="#ref-for-used-value③">4.4. 
Computed Values</a>
    <li><a href="#ref-for-used-value④">4.5. 
Used Values</a> <a href="#ref-for-used-value⑤">(2)</a> <a href="#ref-for-used-value⑥">(3)</a> <a href="#ref-for-used-value⑦">(4)</a>
    <li><a href="#ref-for-used-value⑧">4.6. 
Actual Values</a> <a href="#ref-for-used-value⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="actual-value">
   <b><a href="#actual-value">#actual-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-actual-value">4. 
Value Processing</a> <a href="#ref-for-actual-value①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="cascade">
   <b><a href="#cascade">#cascade</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cascade">1. 
Introduction</a> <a href="#ref-for-cascade">(2)</a>
    <li><a href="#ref-for-cascade①">4.1. 
Declared Values</a>
    <li><a href="#ref-for-cascade">4.2. 
Cascaded Values</a>
    <li><a href="#ref-for-cascade②">5. 
Filtering</a>
    <li><a href="#ref-for-cascade③">7. 
Defaulting</a>
    <li><a href="#ref-for-cascade④">7.1. 
Initial Values</a>
    <li><a href="#ref-for-cascade⑤">7.3.3. 
Erasing All Declarations: the unset keyword</a>
    <li><a href="#ref-for-cascade⑥">8.3. 
Additions Since Level 2</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="output-of-the-cascade">
   <b><a href="#output-of-the-cascade">#output-of-the-cascade</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-output-of-the-cascade">4.2. 
Cascaded Values</a> <a href="#ref-for-output-of-the-cascade①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="origin">
   <b><a href="#origin">#origin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-origin">2. 
Importing Style Sheets: the @import rule</a> <a href="#ref-for-origin①">(2)</a>
    <li><a href="#ref-for-origin②">6. 
Cascading</a> <a href="#ref-for-origin③">(2)</a> <a href="#ref-for-origin④">(3)</a> <a href="#ref-for-origin⑤">(4)</a>
    <li><a href="#ref-for-origin⑥">6.1. 
Cascading Origins</a> <a href="#ref-for-origin⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="important">
   <b><a href="#important">#important</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-important">6. 
Cascading</a>
    <li><a href="#ref-for-important①">6.2. 
Important Declarations: the !important annotation</a> <a href="#ref-for-important②">(2)</a>
    <li><a href="#ref-for-important③">8.2. 
Changes Since the 3 October 2013 Candidate Recommendation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="initial-value">
   <b><a href="#initial-value">#initial-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initial-value">1. 
Introduction</a>
    <li><a href="#ref-for-initial-value①">3. 
Shorthand Properties</a>
    <li><a href="#ref-for-initial-value②">7. 
Defaulting</a>
    <li><a href="#ref-for-initial-value③">7.1. 
Initial Values</a>
    <li><a href="#ref-for-initial-value④">7.2. 
Inheritance</a>
    <li><a href="#ref-for-initial-value⑤">7.3.1. 
Resetting a Property: the initial keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inheritance">
   <b><a href="#inheritance">#inheritance</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inheritance">1. 
Introduction</a>
    <li><a href="#ref-for-inheritance①">4.4. 
Computed Values</a> <a href="#ref-for-inheritance②">(2)</a>
    <li><a href="#ref-for-inheritance③">7. 
Defaulting</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inherited-value">
   <b><a href="#inherited-value">#inherited-value</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inherited-value">7.2. 
Inheritance</a>
    <li><a href="#ref-for-inherited-value①">7.3.2. 
Explicit Inheritance: the inherit keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="inherited-property">
   <b><a href="#inherited-property">#inherited-property</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-inherited-property">7. 
Defaulting</a>
    <li><a href="#ref-for-inherited-property①">7.1. 
Initial Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-all-initial">
   <b><a href="#valdef-all-initial">#valdef-all-initial</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-initial">7. 
Defaulting</a>
    <li><a href="#ref-for-valdef-all-initial①">7.3.1. 
Resetting a Property: the initial keyword</a> <a href="#ref-for-valdef-all-initial②">(2)</a>
    <li><a href="#ref-for-valdef-all-initial③">7.3.3. 
Erasing All Declarations: the unset keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-all-inherit">
   <b><a href="#valdef-all-inherit">#valdef-all-inherit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-inherit">7. 
Defaulting</a>
    <li><a href="#ref-for-valdef-all-inherit①">7.2. 
Inheritance</a>
    <li><a href="#ref-for-valdef-all-inherit②">7.3.2. 
Explicit Inheritance: the inherit keyword</a> <a href="#ref-for-valdef-all-inherit③">(2)</a>
    <li><a href="#ref-for-valdef-all-inherit④">7.3.3. 
Erasing All Declarations: the unset keyword</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-all-unset">
   <b><a href="#valdef-all-unset">#valdef-all-unset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-all-unset">7.3.3. 
Erasing All Declarations: the unset keyword</a> <a href="#ref-for-valdef-all-unset①">(2)</a>
    <li><a href="#ref-for-valdef-all-unset②">8.3. 
Additions Since Level 2</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>